<template>
  <!-- 锅底-->
  <div class="app">
    <div class="head">
      <span class="text">锅底</span>
    </div>
    <div class="head-1">
      <el-row type="flex" align="middle" justify="center">
        <el-col :span="7">
          锅底名称：
          <el-input v-model="name" size="mini" style="width: 250px;"></el-input>
        </el-col>
        <el-col :span="7">
          <el-button type="primary" class="btn" @click="search">搜索</el-button>
          <el-button type="success" class="btn" @click="isShow = true">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table1">
    <el-table :data="tableData" border >
      <el-table-column label="火锅编号" width="100" prop="goods_id"></el-table-column>
      <el-table-column label="火锅名称" width="150" prop="goods_name"></el-table-column>
      <el-table-column label="图片" width="170" prop="picture"></el-table-column>
      <el-table-column label="价格" width="150" prop="price"></el-table-column>
      <el-table-column label="库存" width="150" prop="stock"></el-table-column>
      <el-table-column label="描述" width="161" prop="memo"></el-table-column>
      <el-table-column label="状态" width="170" prop="status">
        <el-switch
          v-model="value"
          active-color="#409eff"
          inactive-color="#ff4949">
        </el-switch>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="color: red;">删除</el-button>
          <el-button type="text" size="small" @click="findOldBase(scope.row.goods_id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
     <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    <el-row>
      <!-- 锅底新增抽屉-->
      <el-drawer :visible.sync="isShow" size="40%" direction="rtl" >
        <span style="font-size: 24px;font-weight: 500; position: relative; top: -40px;left: 20px;">新增锅底</span>
        <div class="addfrom">
          <el-form :model="params" :rules="rules" ref="addBase">
            <el-form-item label="锅底名称" prop="name">
              <el-input v-model="params.name" placeholder="请输入锅底名称" ></el-input>
            </el-form-item><br />
            <el-form-item label="锅底图片:">
              <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item><br />
            <el-form-item label="锅底价格" prop="price">
              <el-input v-model="params.price" placeholder="请输入锅底名称"></el-input>
            </el-form-item><br />
            <el-form-item label="锅底库存" prop="stock">
              <el-input v-model="params.stock" placeholder="请输入锅底名称"></el-input>
            </el-form-item><br />
            <el-form-item label="描述" prop="memo">
              <el-input v-model="params.memo" placeholder="请输入对锅底描述"></el-input>
            </el-form-item><br />
            <el-form-item>
              <el-button type="warning" size="small" style="width: 70px; height: 25px;" @click="add()">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </el-row>
    <el-row>
      <!-- 锅底修改抽屉-->
      <el-drawer :visible.sync="isUpload" size="40%" direction="ltr" >
        <span style="font-size: 24px;font-weight: 500; position: relative; top: -40px;left: 20px;">修改锅底信息</span>
        <div class="addfrom">
          <el-form :model="goods" :rules="rules" ref="updateBase">
            <el-form-item label="锅底名称" prop="name">
              <el-input v-model="goods.name" placeholder="请输入锅底名称" ></el-input>
            </el-form-item><br />
            <el-form-item label="锅底图片:">
              <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item><br />
            <el-form-item label="锅底价格" prop="price">
              <el-input v-model="goods.price" placeholder="请输入锅底名称"></el-input>
            </el-form-item><br />
            <el-form-item label="锅底库存" prop="stock">
              <el-input v-model="goods.stock" placeholder="请输入锅底名称"></el-input>
            </el-form-item><br />
            <el-form-item label="描述" prop="memo">
              <el-input v-model="goods.memo" placeholder="请输入对锅底描述"></el-input>
            </el-form-item><br />
            <el-form-item>
              <el-button type="primary" size="small" style="width: 70px; height: 25px;" @click="Update">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </el-row>
  </div>
</template>
<script>
import http from '@/utils/HttpUtil'
export default{
  data () {
    return {
      rules: {
        name: [{
          required: true, message: '锅底名字不能为空', trigger: 'blur'
        }],
        picture: [{
          required: true, message: '锅底图片不能为空', trigger: 'blur'
        }],
        price: [{
          required: true, message: '锅底价格不能为空', trigger: 'blur'
        }],
        stock: [{
          required: true, message: '锅底库存不能为空', trigger: 'blur'
        }]
      },
      params: {
        name: '',
        picture: '',
        price: '',
        stock: '',
        memo: ''
      },
      goods: {
        goods_id: '',
        name: '',
        picture: '',
        price: '',
        stock: '',
        memo: ''
      },
      imageUrl: '',
      goods_id: '',
      name: '',
      tableData: [],
      value: true,
      isShow: false,
      isUpload: false,
	  action: {
		selectGoodsBase: 'ssmService/Goods/selectGoodsBase',
    addBase: 'ssmService/Goods/addBase',
    findOldBase:'ssmService/Goods/selectBaseDetail',
    update: 'ssmService/Goods/updateBase'
	  },
    currentPage4: ''
    }
  },
  components: {

  },
  methods: {
    /* 新增锅底*/
    add () {
      console.log("jj")
      this.addbase()
    } ,
    search () {
      let goods_name = this.name
      this.getListbase(goods_name, 1, 10)
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
	/* 查询商品列表*/
	getListbase (goods_name = null, curr_page = 1, page_size = 10) {
    let params = {
       'curr_page': curr_page,
       'page_size': page_size
    }
    if (goods_name !== null && goods_name !== '') {
      /* params['baseModel.listAdvancedQuery[0].fieldName'] = 'su.account'
      params['baseModel.listAdvancedQuery[0].fieldValue'] = account */
      params['goods_name'] = goods_name
    }
	      http.xhrGet(this, this.action.selectGoodsBase, params, (res) => {
	        console.log(res)
	         this.tableData = res.data.list
	        console.log(this.tableData)
	      })
	},
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
        /* 新增的实际接口*/
        addbase () {
          console.log(this.params)
          let params = {
            'goods_name': this.params.name,
            'price': this.params.price,
            'stock': this.params.stock,
            'memo': this.params.memo
          }
          http.xhrPost(this, this.action.addBase, params, (res) => {
            this.$message({
              type: 'success',
              message: '新增锅底成功'
            })
              this.isShow = false
          })

        },
        findOldBase(id) {
          this.isUpload = true
          let params = {
            'goods_id': id
          }
          console.log(params)
          http.xhrGet(this, this.action.findOldBase, params, (res) => {
            console.log(res)
            this.goods.name = res.data.goods_name,
            this.goods.price = res.data.price,
            this.goods.stock = res.data.stock,
            this.goods.memo = res.data.memo,
            this.goods.goods_id = res.data.goods_id
            })
        },
        /* 修改*/
        updateBase() {
          let params = {
            'goods_name': this.goods.name,
            'price': this.goods.price,
            'stock': this.goods.stock,
            'memo': this.goods.memo,
            'goods_id': this.goods.goods_id
          }
           http.xhrPost(this, this.action.update, params, (res) => {
             this.$message({
               type: 'success',
               message: '修改锅底成功'
             })
             this.isUpload = false
            })
        },
       /* 点击修改按钮*/
        Update () {
          this.updateBase()
        }
  },
  mounted() {
    this.getListbase()
  }
}
</script>

<style scoped="scoped" lang="scss">
@import '../../assets/style/common.scss';
  .app {
    width: 100%;
    height: auto;
    .head {
      width: 100%;
      background-color: rgba(153, 153, 153, 1);
      height: 40px;
      .text {
        font-size: 20px;
        color: white;
        position: relative;
        left: 20px;
        top: 10px;
      }
    }
    .head-1 {
      height: auto;
      width: 100%;
      position: relative;
      top: 30px;
      .btn {
        width: 60px;
        height: 30px;
      }
    }
    .table1 {
      width: 97%;
      height: 100%;
      position: relative;
      top: 60px;
      left: 20px;
    }
    .addform {
      width: 100%;
      margin-left: 30px;
      overflow: scroll;
      height: 100%;
       .avatar-uploader .el-upload {
          border: 1px solid #d9d9d9;
          width: 250px;
          height: 250px;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          width: 250px;
          height: 250px;
          border-color: #409EFF;
        }
        .avatar-uploader-icon {
          border: 1px dashed #d9d9d9;
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
      }
    }
    .block {
      position: absolute;
      margin-top: 80px;
      margin-left: 350px;
    }
  }
</style>
